<template>
    <div class="loginForm">
        <h3>系统登录</h3>

        <el-form :rules="rules" :model="loginData" ref="submitForm">
            <el-form-item prop="username">
                <el-input placeholder="用户名称" v-model="loginData.username" size="small"></el-input>
            </el-form-item>

            <el-form-item prop="password">
                <el-input type="password" placeholder="用户密码" v-model="loginData.password" size="small"></el-input>
            </el-form-item>

            <el-form-item>
                <el-checkbox v-model="checked">记住密码</el-checkbox>
            </el-form-item>

            <el-button type="primary" size="small" class="loginBtn" @click="submitLogin()">登录</el-button>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data(){
            return{
                checked:true,
                rules:{
                    username:[
                        {required:true,message:'请填写用户名称！',trigger:'blur'}
                    ],
                    password:[
                        {required:true,message:'请填写用户密码！',trigger:'blur'}
                    ]
                },
                loginData:{
                    username:'admin',
                    password:'123'
                }
            }
        },
        methods:{
            submitLogin(){
                this.$refs['submitForm'].validate((valid) => {
                    if (valid) {
                        this.$postKeyValueRequest('/doLogin',this.loginData).then(resp=>{
                            if(resp){
                                window.sessionStorage.setItem('loginUser',JSON.stringify(resp.data));
                                this.$router.replace('/home');
                            }
                        })
                    } else {
                        this.$message.warning('请正确填写用户名和密码！');
                        return false;
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .loginBtn{
        width: 100%;
    }

    .loginForm{
        width: 400px;
        padding: 20px;
        margin: 120px auto;
    }

    .loginForm h3{
        text-align: center;
        color: white;
    }
</style>